<!--
 * @Author: boyyang
 * @Date: 2022-01-12 15:19:46
 * @LastEditTime: 2022-02-19 23:44:08
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\views\gameVideoExhibition\index.vue
-->

<template>
    <div class="exhibition-background">
        <div class="video-player">
            <div class="play-content">
                <video :src="videoPlayUrl" autoplay loop muted controls></video>
            </div>
            <div class="video-player-right">
                <div class="right-video-content">
                    <template v-for="(item, i) in allVideo" :key="i">
                        <div class="video-box">
                            <video
                                :src="item.tempFileURL"
                                @click="playChange(item, i)"
                                :class="[{ 'video-box-active': i == curVideo }]"
                            ></video>
                            <i class="iconfont icon-taizhangbeifen3 play-btn"></i>

                            <tool-tip text="删除视频" class="del-icon">
                                <template #icon>
                                    <i
                                        class="iconfont icon-error del-video-bg"
                                        @click="delVideo(item._id)"
                                    ></i>
                                </template>
                            </tool-tip>
                            <tool-tip text="设置为视频背景" class="bg">
                                <template #icon>
                                    <i class="iconfont icon-bg-pc bg-icon" @click="settingBg(item)"></i>
                                </template>
                            </tool-tip>
                        </div>
                    </template>
                </div>
            </div>

            <div class="next-page">
                <div class="btn-left btn" @click="back">
                    <i class="iconfont icon-custom311"></i>
                </div>
                <div :class="['btn-right', 'btn', { 'btn-disable': isLastPage }]" @click="nextPage">
                    <i class="iconfont icon-zuoyoujiantou-copy-copy-copy1"></i>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { getImgs, delData, updateOneDataByOpenId, userMes } from '@/cloudbase'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useMessage } from '@/components/message'
import { useLoading } from '@/components/fullScreenLoading'

const router = useRouter()
const message = useMessage()
const loading = useLoading()
const userInfo = userMes()

const page = ref<number>(0)
const videoPlayUrl = ref<string>('')
const allVideo = ref<any[]>([])
const curVideo = ref<number>(0)
const isLastPage = ref<boolean>(false)

onMounted(() => {
    getVideo(0)
})

const getVideo = (page: number) => {
    getImgs('wallpaper_video', page, 6).then((res) => {
        if (res.data.length < 6) {
            isLastPage.value = true
        } else {
            isLastPage.value = false
        }
        allVideo.value = allVideo.value.concat(res.data)

        if (page == 0) {
            videoPlayUrl.value = res.data[page * 6].tempFileURL
        }

    })
}

const playChange = (e: any, index: number) => {
    curVideo.value = index
    videoPlayUrl.value = e.tempFileURL
}

const nextPage = () => {
    if (!isLastPage.value) {
        page.value++
        getVideo(page.value)
    }

}

const back = () => {
    router.push({
        name: 'Home'
    })
}

const delVideo = (id: string) => {
    delData('wallpaper_video', id).then((res) => {
        allVideo.value = allVideo.value.filter((item) => {
            return item._id !== id
        })
        message.success('删除成功!')
    })
}

const settingBg = (item: any) => {
    loading.start()
    updateOneDataByOpenId('users', userInfo?.uid as string, {
        download_url: item.download_url,
        tempFileURL: item.tempFileURL,
        fileID: item.fileID,
        filePath: item.filePath,
        create_time: new Date().getTime(),
        type: 'video'
    }).then((res) => {
        loading.end()
        message.success('修改背景成功')
    })
}

</script>

<style scoped lang="scss">
.exhibition-background {
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    background-color: #353540;

    display: flex;
    justify-content: center;
    align-items: center;
    .video-player {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        .play-content {
            box-sizing: border-box;
            display: flex;
            justify-content: center;

            video {
                width: 900px;
                border-radius: 10px;
            }
        }
    }

    .video-player-right {
        box-sizing: border-box;
        height: 100vh;
        width: 300px;
        padding: 15px;

        overflow-y: auto;
        .right-video-content {
            box-sizing: border-box;
            width: 100%;
            display: flex;
            flex-direction: column;
        }
        .video-box {
            box-sizing: border-box;
            width: 100%;
            height: 150px;
            display: flex;
            justify-content: center;
            align-items: center;

            position: relative;

            margin-top: 15px;

            overflow: hidden;

            cursor: pointer;

            &:hover {
                .play-btn {
                    color: rgb(37, 179, 101);
                }

                video {
                    opacity: 0.5;
                    box-sizing: border-box;
                }

            }

            video {
                box-sizing: border-box;
                width: 100%;
                height: 100%;
                border-radius: 5px;
                box-shadow: 5px 4px 3px 5px rgba(0, 0, 0, 0.5);
                object-fit: cover;
            }
        }

        .play-btn {
            position: absolute;

            font-size: 20px;
            color: whitesmoke;
        }
    }

    .video-box-active {
        box-sizing: border-box;
        border: 2px solid rgb(62, 179, 149) !important;
    }
}

.exit {
    position: absolute;
    bottom: 25px;

    i {
        color: whitesmoke;
        font-size: 40px;
        cursor: pointer;

        &:hover {
            transition: all 0.5s linear;
            color: #ff4777;
            transform: translateX(10px);
        }
    }
}

.next-page {
    position: absolute;
    bottom: 25px;
    width: 150px;
    height: 50px;

    box-shadow: 3px 4px 2px 2px rgba(0, 0, 0, 0.5);

    border-radius: 4px;
    overflow: hidden;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    align-items: center;
    background-color: #fff;
}

.btn {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    font-size: 15px;

    cursor: pointer;

    &:hover {
        background-color: rgb(16, 167, 146);
        color: whitesmoke;
    }
}

.btn-active {
    background-color: #ff4777;
    color: whitesmoke;
}

.btn-disable {
    cursor: not-allowed;
}

.del-icon {
    position: absolute;
    top: 10px;
    left: 10px;

    .del-video-bg {
        font-size: 16px;
        color: whitesmoke;
    }
}

.bg {
    position: absolute;
    bottom: 50px;
    left: 10px;

    .bg-icon {
        font-size: 12px;
        color: whitesmoke;
    }

    &:hover {
        color: rgb(221, 110, 110);
    }
}

/* chrome & safari 浏览器 */
/*滚动条整体部分,必须要设置*/
::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    // background-color: #0099ff;
}

@media screen and (max-width: 1300px) {
    .exhibition-background {
        .video-player {
            flex-direction: column;
            justify-content: flex-start;
            .play-content {
                width: 98%;

                video {
                    width: 100%;
                    border-radius: 3px;
                }
            }
        }

        .video-player-right {
            width: 100%;
            display: flex;
            flex-direction: row;
            overflow-x: auto;

            .right-video-content {
                width: auto;
                flex-direction: row;
            }
            .video-box {
                box-sizing: border-box;
                // width: 350px;
                // height: 200px;
                video {
                    width: 200px;
                    height: 100%;
                    margin: 0 20px;
                    border-radius: 1px;
                }
            }
        }
    }

    .exit {
        i {
            font-size: 25px;
        }
    }

    .del-icon {
        left: 25px;
    }

    .bg {
        left: 25px;
    }

    ::-webkit-scrollbar {
        width: 2px !important;
        height: 5px !important;
    }
}
</style>
